<!--会员中心 》消费记录-->
<template>
  <div style="width: 100%;height: 600px;margin-left: 60px;;
        padding: 20px 20px;box-sizing: border-box;font-size: 17px;text-align: left;overflow: auto">
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.transacName }}</span>
            </el-form-item>
            <el-form-item label="交易状态">
              <span>{{ props.row.isTransac }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.orderN }}</span>
            </el-form-item>
            <el-form-item label="付款时间">
              <span>{{ props.row.mtime }}</span>
            </el-form-item>
            <el-form-item label="交易金额">
              <span>{{ props.row.amountM }}</span>
            </el-form-item>
            <el-form-item label="付款金额">
              <span>{{ props.row.mamount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="商品 ID"
          prop="orderN">
      </el-table-column>
      <el-table-column
          label="商品名称"
          prop="transacName">
      </el-table-column>
      <el-table-column
          label="商品价格"
          prop="amountM">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "MemberConsumRecordsView",
  data() {
    return {
      user:'',
      tableData: []
    }
  },
  methods: {
    convertForm(item) {
      for (let i = 0; i < item.length; i++) {
        if (item[i].isTransac==true){
          item[i].isTransac='交易完成';
        }else{
          item[i].isTransac='交易失败';
        }
      }
      return item;
    }
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem('user'))
    if (this.user == null) {
      this.$message.error("请登录后重试！")
      this.$router.push('/login');
    }
    let jwt=this.user.token;
    this.axios
        .create({
          'headers': {
            'Authorization': jwt
          }
        })
        .get('http://localhost:29000/v1/integrals/get-intracha')
    .then((response)=>{
      if (response.data.code==20000){
        this.tableData=this.convertForm(response.data.data);
      }
    })
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>